<template>
	<view class="page">
		<view class="title">
			为了更好的为您服务，请您务必填写真实信息
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<!-- 拍品名称及主图 -->
				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="font-weight: bold;">商品标题:</span>
					</template>
				</u-form-item>
				<uni-forms-item prop="userInfo.firm">
					<u--textarea v-model="value1" placeholder="请写明商品名/属性/规格等关键信息" height="80" maxlength="30"
						count="true" border="bottom"></u--textarea>
				</uni-forms-item>
				<!-- 
			<u-form-item borderBottom>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10">
				</u-upload>
			</u-form-item> -->

				<!-- //视频文件 -->
				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">视频文件:</span>
					</template>

				</u-form-item>
				<u-form-item prop="userInfo.video" borderBottom>
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="10" accept="video"></u-upload>
				</u-form-item>
				<!-- 拍卖品图册 -->
				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">商品图册:</span>
					</template>

				</u-form-item>
				<u-form-item borderBottom>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="10" :previewFullImage="true"></u-upload>
				</u-form-item>

				<u-form-item prop="userInfo.firm" borderBottom @click="showShop=true">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">商品类目:</span>
					</template>
					<u-input v-model="model1.userInfo.shop.name" disabled placeholder="请选择商品类目" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">售价：:</span>
					</template>
					<u-input v-model="model1.userInfo.price" placeholder="售价" border="none"></u-input>
				</u-form-item>

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">原价：:</span>
					</template>
					<u-input v-model="model1.userInfo.oldprice" placeholder="原价" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">库存：:</span>
					</template>
					<u-input v-model="model1.userInfo.stock_num" placeholder="库存" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


				<u-form-item prop="userInfo.firm" borderBottom @click="isReturn=true">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">能否退货:</span>
					</template>
					<u-input v-model="model1.userInfo.return.name" disabled placeholder="请选择商品类目"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>




				<u-form-item prop="userInfo.free" borderBottom @click="isTake= true; hideKeyboard()" ref="item1">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">能否上门自取:</span>
					</template>
					<u--input v-model="model1.userInfo.take.name" disabled placeholder="请选择是否上门自取"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<!-- <u-form-item prop="userInfo.free" borderBottom @click="showFree= true; hideKeyboard()" ref="item1">
				<template #label class="title">
					<span style="color: red;">*</span>
					<span style="margin-right: 20rpx;font-weight: bold;">是否包邮:</span>
				</template>
				<u--input v-model="model1.userInfo.free.name" disabled placeholder="请选择是否包邮" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item> -->

				<u-form-item prop="userInfo.firm" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">邮费:</span>
					</template>
					<u--input border="none" v-model="model1.userInfo.express_fee"></u--input>
				</u-form-item>


				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="font-weight: bold;">商品详情:</span>
					</template>
				</u-form-item>
				<uni-forms-item prop="userInfo.firm" borderBottom>
					<u--textarea v-model="value2" placeholder="建议描述商品细节等" height="80" maxlength="150" count="true"
						border="bottom"></u--textarea>
				</uni-forms-item>


				<u-form-item prop="userInfo.firm" borderBottom v-if="addfee">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 400rpx;font-weight: bold;">费用:</span>
					</template>
					<text style="color: #d1a969;text-align: right;"> ￥{{addfee}}</text>

				</u-form-item>

				<!-- 
			<u-form-item prop="userInfo.firm" borderBottom>
				<template #label class="title">
					<span style="color: red;">*</span>
					<span style="margin-right: 500rpx;font-weight: bold;">参数:</span>
				</template>
				<text style="color: #d1a969;" @click="showDialog = true"> 添加参数</text>

			</u-form-item>
			<u-form-item>
				<template #label class="title">
					<span style="color: red;">*</span>
					<span style="margin-bottom: 120rpx;font-weight: bold;">商品图册:</span>
					<span style="color:#d1a969;">(商品规格选择完不允许修改)</span>
				</template>

			</u-form-item> -->

				<u-form-item prop="userInfo.firm" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 400rpx;font-weight: bold;">自定义属性:</span>
					</template>
					<text style="color: #d1a969;" @click="showDialog1 = true"> 添加</text>

				</u-form-item>
			</u--form>
			<u-action-sheet :show="showFree" :actions="actions" title="请选择是否包邮" @close="showFree = false"
				@select="freeSelect">
			</u-action-sheet>
			<!-- //是否上门 -->
			<u-action-sheet :show="isTake" :actions="columns" title="请选择是否上门" @close="isTake = false"
				@select="takeSelect">
			</u-action-sheet>
			<view class="custom-button" @tap="submit2">提交</view>
			<!-- 参数 -->
			<u-popup :show="showDialog1" @close="close" @open="open">
				<view class="popup-content">
					<view class="title">
						添加规格
					</view>
					<view class="" v-for="(el,idx) in attributeList">
						<view class="item1">
							<text>规格名：</text>
							<!-- <input type="text" placeholder="请输入"  ref="attr_keys" /> -->
							<u-input @input="(event) => keysInput(idx, event)" :value="el._key" border="bottom"
								placeholder="请输入" />
						</view>
						<view class="item1">
							<text>规格值：</text>
							<u-input @input="(event) => valsInput(idx, event)" :value="el._value" border="bottom"
								placeholder="请输入" />
							<!-- <input type="text" placeholder="请输入"   ref="attr_vals"/> -->
							<text class="btntext" @click="addAttribute">+</text>
							<text class="btntext" v-if="idx>=1" @click="delAttribute(idx)">-</text>
						</view>

					</view>

					<view class="button-group">
						<view class="item item1" @click="submit" type="primary">提交</view>
						<view class="item item2" @click="cancel">取消</view>
					</view>
				</view>
			</u-popup>
			<u-picker :keyName="'name'" :show="showShop" :columns="shopLists" @close="close"
				@confirm="confirm"></u-picker>
			<u-picker :keyName="'name'" :show="isReturn" :columns="returns" @close="close1"
				@confirm="confirm1"></u-picker>


		</view>
	</view>





</template>

<script>
	import {
		submitStoreGoods,
		uploadImg,
		uploadVideo,
		getStoreInfo,
		getGoodsInfoById,
		getCategoryList
	} from '@/config/api.js';
	export default {
		data() {
			return {
				addfee: '',
				goodsId: uni.getStorageSync('goodsId'),
				test2: {},
				test1: {},
				nav_id: uni.getStorageSync('pathNavId'),
				store_id: uni.getStorageSync('pathStoreId'),
				value1: '',
				value2: '',
				showDialog: false, // 控制弹框的显示与隐藏
				showDialog1: false,
				showShop: false,
				paramName: '',
				paramContent: '', // 用于存储输入的参数名
				isTake: false,
				isReturn: false, //是否退货
				selectedLabel: '',
				//规格属性
				count: '',
				price: '',
				color: '',
				fileList2: [],
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '品相',
						disabled: false
					},
					{
						name: '尺寸',
						disabled: false
					},
					{
						name: '颜色',
						disabled: false
					}
				],

				fileList3: [],
				showFree: false,
				fileList1: [],
				model1: {
					userInfo: {
						firm: '',
						price: '',
						free: {
							id: null
						},
						shop: {
							id: null
						},
						return: {
							id: null
						},
						price: '',
						oldprice: '',
						stock_num: '',
						take: {
							id: null
						},
						express_fee: ''
					},
				},
				categoryLists: null,
				columns: [{
					name: '能',
					id: 1
				}, {
					name: '不能',
					id: 0
				}],
				returns: [
					[{
						name: '不能',
						id: 0
					}, {
						name: '能',
						id: 1
					}]
				],
				actions: [{
						name: '包邮',
						id: 1
					},
					{
						name: '不包邮',
						id: 0
					},

				],
				shopLists: [
					['瓷器', '书画', '玉器', '玛瑙', '佛像', '珠宝', '茶叶', '杂项', '农副产品']
				],
				rules: {
					'userInfo.firm': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
					'userInfo.free': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择是否包邮',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				attributeList: [{
					keys: '',
					vals: ''
				}],
				switchVal: false
			};
		},

		mounted() {
			console.log(222222)
			getCategoryList({
				nav_id: uni.getStorageSync('pathNavId'),
			}).then(res => {
				this.shopLists = [res];
				this.getGoodsInfo()
			});

		},
		methods: {
			getStoreInfo() {
				getStoreInfo({
					nav_id: this.nav_id,
					store_id: this.store_id,
				}).then(res => {
					this.addfee = res;
				});
			},
			getGoodsInfo() {
				if (!this.goodsId) return this.getStoreInfo();
				getGoodsInfoById({
					id: this.goodsId
				}).then(res => {
					// this.model1.userInfo.shop.id = res.category_id;
					this.fileList2.push({
						url: res.video_url
					});
					this.value1 = res.title;
					this.model1.userInfo.stock_num = res.stock_num;
					this.model1.userInfo.price = res.real_price;
					this.model1.userInfo.oldprice = res.original_price;
					this.model1.userInfo.express_fee = res.express_fee;
					// this.model1.userInfo.return.id = res.isretreat;

					this.value2 = res.introduce;
					this.attributeList = res.attribute;

					// fileList3

					this.shopLists[0].forEach(el => {
						if (el.id == res.category_id) this.model1.userInfo.shop = el;
					});
					this.returns[0].forEach(el => {
						if (el.id == res.isretreat) this.model1.userInfo.return = el;
					});
					this.columns.forEach(el => {
						if (el.id == res.isSelfPull) this.model1.userInfo.take = el;
					});
					res.img_list.forEach(el => {
						this.fileList3.push({
							url: el
						})
					});
				})
			},
			addAttribute() {
				this.attributeList.push({
					_key: '',
					_value: ''
				})
			},
			delAttribute(index) {
				this.attributeList.splice(index, 1)
			},
			//选择商品规格
			checkboxChange(n) {
				console.log('change', n);
			},
			//选择商品类目
			close() {
				this.showShop = false; // 关闭选择器
			},
			confirm(selectedItems) {
				// selectedItems 是选中的商品类目

				this.model1.userInfo.shop = selectedItems.value[0]; // 更新输入框的值为选中的商品类目
				console.log('哈哈哈哈', selectedItems.value);
				this.showShop = false; // 关闭选择器
			},
			//选择是否包邮
			close1() {
				this.isReturn = false; // 关闭选择器
			},
			confirm1(selectedItems) {
				// selectedItems 是选中的商品类目

				this.model1.userInfo.return = selectedItems.value[0]; // 更新输入框的值为选中的商品类目
				console.log('哈哈哈哈', selectedItems.value);
				this.isReturn = false; // 关闭选择器
			},
			freeSelect(e) {
				this.model1.userInfo.free = e
				this.$refs.uForm.validateField('userInfo.free')
			},
			takeSelect(e) {
				this.model1.userInfo.take = e
				this.$refs.uForm.validateField('userInfo.')
			},
			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.uForm.setRules(this.rules)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let result = null;
					if (lists[i].type == 'video') result = await this.uploadFileVideoe(lists[i].url);
					if (lists[i].type == "image") result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFileVideoe(url) {
				return new Promise((resolve, reject) => {
					uploadVideo({
						url: url,
						fileName: 'goods'
					}).then(res => {
						resolve(res)
					})
				})
			},

			keysInput(index, event) {
				this.attributeList[index]['_key'] = event;
			},
			valsInput(index, event) {
				this.attributeList[index]['_value'] = event;
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uploadImg({
						url: url,
						fileName: 'goods'
					}).then(res => {
						resolve(res)
					})
				})
			},
			submit() {
				this.showDialog1 = false;
			},
			getAttribute() {
				const list = [];
				this.attributeList.forEach((el, idx) => {
					console.log(el)
					const _keys = el['_key'],
						_vlas = el['_value'];
					if (_keys && _vlas) list.push({
						_key: _keys,
						_value: _vlas
					})
				});
				return list;
			},
			//键盘已隐藏
			hideKeyboard() {
				// 这里是隐藏键盘的逻辑
				console.log("键盘已隐藏");
				// 具体实现方式，依赖于你的需求
			},
			submit2() {
				const sendReqData = {
					nav_id: this.nav_id,
					shichang_id: uni.getStorageSync('pathShiChangId'),
					store_id: this.store_id,
					category_id: this.model1.userInfo.shop.id,
					video_url: this.fileList2[0]['url'],
					title: this.value1,
					stock_num: this.model1.userInfo.stock_num,
					real_price: this.model1.userInfo.price,
					original_price: this.model1.userInfo.oldprice,
					express_fee: this.model1.userInfo.express_fee,
					isretreat: this.model1.userInfo.return.id,
					isSelfPull: this.model1.userInfo.take.id,
					introduce: this.value2,
					attribute: this.getAttribute()
				}
				const imgList = [];
				this.fileList3.forEach(el => {
					imgList.push(el.url)
				});
				if (this.goodsId) {
					sendReqData['id'] = this.goodsId
				}
				sendReqData['img_list'] = imgList.join();
				sendReqData['attribute'] = JSON.stringify(sendReqData['attribute'])
				if (this.addfee) {
					// 这里是是支付逻辑 支付完成后再添加商品接口
					return '';
				}

				submitStoreGoods(sendReqData).then(res => {
					uni.$u.toast('操作成功!')
				})
			},
			cancel() {
				this.showDialog1 = false; // 关闭弹框
				this.paramName = ''; // 清空输入框
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style scoped lang="scss">
	.form {

		padding: 0 20rpx;

	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #ffebeb;
		color: red;
		padding: 0 20rpx;
	}

	.btntext {
		display: inline-block;
		width: 60rpx;
	}

	.custom-button {
		background-color: #d1a969;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;

		border-radius: 40rpx;
		margin: 20rpx;
	}

	.popup-content .item1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
	}

	.popup-content .title {
		margin-top: 20rpx;
		text-align: center;
	}

	.popup-content .button-group {
		display: flex;
		margin-top: 30rpx;
	}

	.popup-content .button-group .item {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		border-radius: 40rpx;
		background-color: $base;
		margin: 0 40rpx;
	}
</style>